<template>
  <el-dialog
    v-el-drag-dialog="{updataFull, updataDialogWidth}"
    :fullscreen="isfullscreen"
    :append-to-body="true"
    :width="setDialogWidth('500px')"
    :visible="visible"
    :title="$t('ALARM_STRATEGY')"
    @open="open"
    @close="close"
  >
    <el-form
      ref="configForm"
      :model="formData"
      :rules="rules"
      label-width="auto"
      class="pr-40 help-box"
    >
      <el-form-item :label="$t('LINK_SEGMENT_NAME')">
        {{ rowData.segmentName }}
      </el-form-item>
      <el-form-item :label="$t('EFFECT')">
        <el-switch
          v-model="formData.enableSill"
          :disabled="!formData.linkLossSill && !formData.avgLossSill && !formData.endLengthSill"
        />
      </el-form-item>
      <el-form-item :label="$t('LINK_LOSS_THRESHOLD')" prop="linkLossSill">
        <el-input v-model="formData.linkLossSill" class="input-box" size="mini" />
        <!-- <el-popover
          width="200"
          trigger="hover"
          :content="$t('LINK_LOSS_THRESHOLD_TIPS')"
          class="form-tips"
        >
          <i slot="reference" class="iconfont icon-AFSwenhao text-color" />
        </el-popover> -->
      </el-form-item>
      <el-form-item :label="$t('AVERAGE_LOSS_THRESHOLD')" prop="avgLossSill">
        <el-input v-model="formData.avgLossSill" class="input-box" size="mini" />
        <!-- <el-popover
          width="200"
          trigger="hover"
          :content="$t('AVERAGE_LOSS_THRESHOLD_TIPS')"
          class="form-tips"
        >
          <i slot="reference" class="iconfont icon-AFSwenhao text-color" />
        </el-popover> -->
      </el-form-item>
      <el-form-item :label="$t('TIP_LENGTH')" prop="endLengthSill">
        <el-input v-model="formData.endLengthSill" class="input-box" size="mini" />
        <el-popover width="200" trigger="hover" :content="$t('TIP_LENGTH_TIPS')" class="form-tips">
          <i slot="reference" class="iconfont icon-AFSwenhao text-color" />
        </el-popover>
      </el-form-item>
      <el-form-item :label="$t('PLUG_LOSS_THRESHOLD')" prop="plugLossSill">
        <el-input v-model="formData.plugLossSill" class="input-box" size="mini" />
      </el-form-item>
    </el-form>
    <template v-slot:footer>
      <el-button @click="close">{{ $t('CANCEL') }}</el-button>
      <el-button @click="open">{{ $t('RESET') }}</el-button>
      <el-button type="primary" @click="$debounce(save)">{{ $t('SAVE') }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
  import logicSegmentApi from '@/api/oen/LogicSegmentApi'
  import { deepClone } from '@/utils/common'

  export default {
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      rowData: {
        type: Object,
        default: () => {}
      }
    },
    inject: ['parentVM'],
    data() {
      return {
        formData: {
          linkLossSill: '',
          avgLossSill: '',
          endLengthSill: '',
          plugLossSill: '',
          enableSill: false
        }
      }
    },
    computed: {
      rules() {
        return {
          linkLossSill: [
            {
              pattern: /^[+]?((\d*(\.\d{1,3})$)|([1-9]\d*$))/,
              message: this.$t('ONLY_POSITIVE_FLOAT', { count: 3 }),
              trigger: ['blur', 'change']
            }
          ],
          avgLossSill: [
            {
              pattern: /^[+]?((\d*(\.\d{1,3})$)|([1-9]\d*$))/,
              message: this.$t('ONLY_POSITIVE_FLOAT', { count: 3 }),
              trigger: ['blur', 'change']
            }
          ],
          endLengthSill: [
            {
              pattern: /^([1-9]|[1-9]\d|100)$$/,
              message: this.$t('1_TO_100'),
              trigger: ['blur', 'change']
            }
          ],
          plugLossSill: [
            {
              pattern: /^[+]?((\d*(\.\d{1,3})$)|([1-9]\d*$))/,
              message: this.$t('ONLY_POSITIVE_FLOAT', { count: 3 }),
              trigger: ['blur', 'change']
            }
          ]
        }
      }
    },
    methods: {
      open() {
        this.formData = deepClone(this.rowData)
        this.formData.enableSill = this.formData.enableSill || false
        this.$nextTick(() => {
          this.$refs.configForm && this.$refs.configForm.clearValidate()
        })
      },
      // 保存逻辑网段修改
      save() {
        this.$refs.configForm.validate(valid => {
          if (!valid) return
          const logParams = {
            segmentName: this.rowData.segmentName,
            functionName: this.parentVM.functionName
          }
          Object.keys(this.$options.data().formData).forEach(key => {
            if (this.formData[key] != this.rowData[key]) {
              logParams[key] = this.formData[key]
            }
          })
          logParams.enableSill = this.formData.enableSill ? this.$t('VALID_YES') : this.$t('VALID_NULL')
          Object.keys(this.formData.enableSill)
          const requestData = {
            ...this.rowData,
            ...this.formData,
            logParams // 操作日志需要的参数
          }

          logicSegmentApi.saveLogicSegment(requestData).then(res => {
            res
              ? this.$message.success(this.$t('MODIFY_SUCCESS'))
              : this.$message.error(this.$t('MODIFYFAILED'))
            this.close(true)
          })
        })
      },
      reset({ row, $index }) {
        const oldData = deepClone(this.rowData.logicSegment[$index])
        row.linkLossSill = oldData.linkLossSill
        row.plugLossSill = oldData.plugLossSill
        row.avgLossSill = oldData.avgLossSill
        row.endLengthSill = oldData.endLengthSill
      },
      close(load) {
        this.$emit('close', load)
        this.$refs.configForm.clearValidate()
      }
    }
  }
</script>

<style>
  .input-box {
    width: 100%;
  }
  .input-box.el-input-number .el-input__inner {
    text-align: left;
  }
</style>
